<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
    <title>分类详情</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css?v=1.1">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
    <style>
        .Footprints {
            width: .46rem;
            height: .46rem;
            position: fixed;
            bottom: .72rem;
            right: .12rem;
        }

        .select-box {
            z-index: 3;
            display: none;
            width: 100%;
            height: .6rem;
            justify-content: space-around;
            align-items: center;
            position: absolute;
            top: .86rem;
            background: #fff;
            box-shadow: #eee 1px 1px 1px 1px;
            font-size: .14rem;
        }

        .select-box.active {
            display: flex
        }

        .select-box .span-button {
            display: block;
            width: 1rem;
            text-align: center;
        }

        .A-classification .b-tab .b-tab-2 ul li>p em,
        .A-classification .b-tab .b-tab-3 ul li>p em,
        .A-classification .b-tab .b-tab-4 ul li>p em {
            background: url('../img/热度 02@2x.png') no-repeat 2.5rem;
            color: #f00;
            padding-left: .12rem;
            background-size: .09rem .12rem;
            flex: 1;
            text-align: right;
        }
        .A-classification .b-tab .b-tab-1:after{
            top: 1.43rem;
            content: '';
            display: none;
        }
        .A-classification .b-tab .b-tab-1 ul{
            padding: 0;
        }
        .Footprints-box ul li .right .t2 span{
            font-size: 12px;
        }
        .b-tab-3 ul li div p{
        	height: 1.1em;
        	overflow: hidden;
        	line-height: .2rem;
        }
        .A-classification .b-tab .img p{
        		height:0.21rem;
        		line-height:0.21rem;
        		white-space: nowrap;
        		overflow:hidden;
        		text-overflow: ellipsis;
        }
        .Footprints-box{
        		display:none;
        		left:0;
        		right:0;
        		top:0.14rem;
        		bottom:0.14rem;
        		margin:0 auto;
        }
        .overflowhidden2{
        		display:-webkit-box;
        		word-break: break-all;
        		text-overflow: ellipsis;
        		-webkit-box-orient:vertical;
        		-webkit-line-clamp:4;
        		overflow:hidden;
        		height:0.70rem;
        		margin-bottom:0.05rem!important;
        		line-height: 0.175rem;
        		padding-left: 0.12rem;
        }
		.Footprints-box ul li .right .t2 em{
			margin-top:0.02rem
		}
		.A-classification .b-tab .b-tab-2 ul li, .A-classification .b-tab .b-tab-3 ul li, .A-classification .b-tab .b-tab-4 ul li{
			height: initial;
		}
    </style>
</head>

<body style="background: #f2f2f2">


    <!--正文-->
    <div class="A-classification">
        <nav class="h-tab flex">
            <a href="javascript:;">最新上拍</a>
            <a href="javascript:;">即将截拍</a>
            <a href="javascript:;" class="active">综合</a>
            <a href="javascript:;" @click='change_type(e)'>一口价</a>
        </nav>
        <div class="b-tab">
            <div class="b-tab-1" style="margin-top: .08rem">
                <div v-for='item in new' style="position: relative;">
                    <img :src="item.produce_head_image.split(',')[0]" @click="link_dianpu(this)" alt="" style="width: .44rem;height: .44rem;border-radius: 50%;margin-left: 0.2rem;">
                    <span style="font-size: 0.14rem;position: absolute;left:0.7rem;top:0.15rem;">{{item.store_name}}新品上拍</span>
                    <ul  style="margin-top: .12rem;margin-bottom:.12rem;overflow: hidden;">
                        <li style="width: 32.333%;text-align: center;float: left;border-radius: .04rem;padding:.1rem 0;box-sizing: border-box;" v-for='items in item.produce' @click='link_jump_1(this)' v-if="$index<3">
                            <img :src="items.produceHeadImage.split(',')[0]" alt="">
                            <h6>{{items.produceTitle}}</h6>
                            <p><span>首发价</span><em>￥ <font>{{items.auctionSet.startingPrice}}</font>起</em></p>
                        </li>

                    </ul>
                </div>

            </div>
            <div class="b-tab-2">
                <ul>
                    <li @click='link_jump_2(this)' v-for='item in will_data'>
                        <div class="img" v-bind:style="{ 'background-image': 'url(' + item.produce_head_image.split(',')[0] + ')','background-repeat':'no-repeat','background-size':'cover','background-position':'center center' }">
                            <!--<img :src="item.produce_head_image.split(',')[0]" alt="">-->
                            <p>{{item.produce_describe}}</p>
                        </div>
                        <p class="flex"><span>￥：<font>{{item.starting_price}}</font>起</span><em @click='add_good(this)' style="background-position-x:97%;color:rgba(18,18,18,0.25)">{{item.produce_good_num}}</em></p>
                    </li>
                </ul>

            </div>
            <div class="b-tab-3 active">
                <ul>
                    <li v-for='item in list_1'>
                        <div class="img" @click='link_jump_3(this)' v-bind:style="{ 'background-image': 'url(' + item.produceHeadImage.split(',')[0] + ')','background-repeat':'no-repeat','background-size':'cover','background-position':'center center' }">
                            <!--<img :src="item.produceHeadImage" alt="">-->
                            <p>{{item.produceDescribe}}</p>
                        </div>
                        <p class="flex"><span>￥：<font>{{item.starting_price}}</font><span v-if="item.whitch_type == 1">起</span></span><em @click='add_good(this)' style="background-position-x:97%;color:rgba(18,18,18,0.25)">{{item.produceGoodNum}}</em></p>
                    </li>
                </ul>
            </div>
            <div class="b-tab-4">
                <ul>
                    <li v-for='item in att'>
                        <div class="img" @click='link_jump_4(this)'>
                            <img :src="item.produce_head_image.split(',')[0]" alt="" style="height: 2rem;">
                            <p>{{item.produce_describe}}</p>
                        </div>
                        <p class="flex"><span>￥：<font>{{item.produce_money}}</font></span><em style="background-position-x:97%; " @click='add_good(this)' style="background-position-x:97%;color:rgba(18,18,18,0.25)">{{item.produce_good_num}}</em></p>
                    </li>
                </ul>
            </div>
        </div>

    </div>

    <img src="../img/足迹@2x 2.png" alt="" class="Footprints" @click='load_foot()'>

    <!--灰色浮层-->
    <div class="mask" style="background: rgba(50,50,50,0.5);display:none;z-index:2;"></div>

    <div class="select-box flex active" v-show='active' style="top: .36rem;">
        <span class="span-button" @click='num1()'>销量</span>
        <span class="span-button" @click='num2()'>价格</span>
    </div>

    <div class="Footprints-box" style="overflow: auto;">
        <!--<div style="text-align: right;font-size: 12px;" >关闭</div>-->
        <h5>我的足迹</h5>
        <div v-if="foot.length == 0">
            暂无足迹
        </div>
        <div v-else>
            <ul>
                <li class="clearfix" v-for='item in foot'>
                    <img :src="item.produceHeadImage.split(',')[0]" alt="">
                    <div class="right">
                        <p class="t1 overflowhidden2">{{item.produceTitle}}</p>
                        <p class="t2">
                            <span>￥<font>{{item.producePrice}}</font>起</span>
                            <em @click='click_link_sim(this)'>找相似</em>
                        </p>
                    </div>
                </li>

            </ul>
        </div>

    </div>
    <script src='../js/vue.js'></script>
    <script src='../js/vue-resource.min.js'></script>
    <script>
        $(function () {

            $('.h-tab a').on('click', function () {
                var index = $(this).index();
                $(this).addClass('active').siblings().removeClass('active')
                $('.b-tab>div').eq(index).addClass('active').siblings().removeClass('active');
                if(index!=3){
                	$(".select-box").hide();
                }
            })
            $('.Footprints').click(function () {
                $('.Footprints-box').css("display",'block');
                $('.mask').show();
            })
            $(".mask").click(function (){
                $(".Footprints-box").css('display','none');
                $(".mask").hide();
            });
            let s_name = getQueryString('s_name')
            $('title').html(s_name)
        })
    </script>
    <script>
        $(function () {
            function getHistory (){
                $.ajax({
                    url:base_url+"ZITAOHUI/store/addBrows",
                    data:{
                        uid:sessionStorage.getItem("uid"),
                        storeid:''
                    },
                    dataType:"json",
                    success:function (data){

                    }
                })

            }
            function getUrlParam(name) {
                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null; //返回参数值
            }
            let first = getUrlParam('firstTypeId');
            let sec = getUrlParam('secondTypeId');
			sessionStorage.firstTypeId = first;
			sessionStorage.secondTypeId = sec;
            new Vue({
                el: 'body',
                data: {
                    thisurl: base_url + 'ZITAOHUI/produceType/secondType',
                    foot: [],
                    list_1: [],
                    will_data: [],
                    new: [],
                    active: false,
                    value: '2',
                    uid:'',
                    storeId:'',
                    produceId:'',
					isFirst:true,//控制点击一口价的时候，第一次按照销量排行
                },
                ready: function () {


                    var _self = this;
                    _self.uid = sessionStorage.getItem("uid");
                    this.$http.get(this.thisurl, {
                            params: {
                                firstTypeId: first,
                                secondTypeId: sec
                            }
                        })
                        .then((response) => {
                            console.log(response);
                            let all_data = response.data.extend;
                            let list_1 = all_data.list;
                            let new_produce = all_data.list2;
                            this.$set('new', new_produce);
                            this.$set('list_1', list_1)
                            console.log(this.list_1)

                        }, (response) => {
                            console.log('数据出错')
                        }).catch(function (response) {
                            console.log(response)
                        });




                    this.$http.get(base_url + 'ZITAOHUI/comingToend', {
                            params: {
                                firstType: first,
                                secondeType: sec
                            }
                        })
                        .then((response) => {
                            console.log(response)
                            let all_data = response.data.extend.list;
                            this.$set('will_data', all_data);
                            console.log(this.will_data);
                        }, (response) => {
                            console.log('数据出错')
                        })
                },
                methods: {
                    // 点击足迹加载数据
                    load_foot: function () {
                        var _self = this;
                        this.$http.get(base_url + 'ZITAOHUI/foot', {
                                params: {
                                    userId: _self.uid,
                                }
                            })
                            .then((response) => {
                                console.log(response);
                                let all_data = response.data.extend;
                                console.log(all_data);
                                let arr = [],
                                    i = 0;
                                for (i; i < all_data.list.length; i++) {
                                    arr.push(all_data.list[i].produce)
                                }
                                console.log(arr);
                                _self.storeId = all_data;
                                this.$set('foot', arr);

                            }, (response) => {
                                console.log('数据出错')
                            }).catch(function (response) {
                                console.log(response)
                            })
                    },
                    // 点击找相似跳转
                    click_link_sim: function (t) {
                    	console.log(t);
                        console.log(t.item.produceTitle);
                        sessionStorage.produceTitle = t.item.produceTitle;
                        window.location.href = '../page/Similar-to-the-auction.html?value=';
                    },
                    change_type: function () {
                        var vm = this;
                        setTimeout(function () {
                            if ($('.h-tab a:last-child').hasClass('active')) {
                                if (vm.active == true) {
                                    vm.active = false
                                } else if (vm.active == false) {
                                    vm.active = true
                                }
								
                            }
                        }, 50);
						if(vm.isFirst){//控制进入页面第一次点击一口价的时候，让按照销量排序
							vm.num1();
							vm.isFirst = false;
						}
						

                    },
                    link_dianpu:function (t){ //进入店铺
                        console.log(t.new[0].storeId);
                        window.location.href = "Shop.html?s_id="+t.new[0].storeId;
                    },
                    num1: function () {
                        this.num_all(base_url + 'ZITAOHUI/producefixedprice')

                    },
                    num2: function () {
                        this.num_all(base_url + 'ZITAOHUI/producefixemoney')

                    },
                    link_jump_3: function (t) {
                         window.location.href = '../page/buy-info-page.3.html?s_name=' + '' +
                            '&p_id=' + t.item.produceId + '&s_id=' + t.item.storeId +"&time="+new Date().getTime()
                    },

                    link_jump_1: function (t) {
//                        return false;
                        // window.location.href = '../page/buy-info-page.3.html?s_name=' + t.items.produceTitle+ '&p_id='+t.items.produceId+'&s_id='+t.item.storeId
                        window.location.href = '../page/buy-info-page.3.html?s_name=' + '' +
                            '&p_id=' + t.items.produceId + '&s_id=' + t.item.storeId+"&time="+new Date().getTime()

                    },
                    link_jump_2: function (t) {
                        window.location.href = '../page/buy-info-page.3.html?s_name=' + '' +
                            '&p_id=' + t.item.produce_id + '&s_id=' + t.item.store_id+"&time="+new Date().getTime()
                    },
                    link_jump_4:function(t){
                         window.location.href = '../page/buy-info-page.3.html?s_name=' + '' +
                            '&p_id=' + t.item.produce_id + '&s_id=' + t.item.store_id +"&time="+new Date().getTime()
                    },
                    num_all: function (url) {
                        this.active = false;
                        console.log(this.active)
                        if (this.value == 1) {
                            this.value = 2
                        } else if (this.value == 2) {
                            this.value = 1
                        }
                        this.$http.get(url, {
                                params: {
                                    value: this.value,
                                    produce_first_type:first,
                                    produce_second_type:sec

                                }
                            })
                            .then((response) => {
                                console.log(response)
                                let all_data = response.data.extend.list;
                                this.$set('att', all_data)

                            }, (response) => {
                                console.log('数据出错')
                            })
                    },
                    add_good: function (t) {
                        console.log(t)

                        this.$http.get(base_url + 'ZITAOHUI/goodNum', {
                            params: {
                                produceId: t.item.produceId,
                                user_id: 1
                            }
                        }).then(
                            function (data) {
                                console.log(data)
                                let sun = data.data.extend;
                                sun = sun.haha.list;
                                if (sun == 1) {
                                    t.item.produceGoodNum += 1;
                                } else if (sun == 2) {
                                    alert('网络不好，请稍后再试')
                                } else {
                                    alert('您已经对该商品点过赞啦')
                                }
                            }
                        )
                    }

                }
            })

        })
    </script>
</body>

</html>